<template>
  <div>
    <el-descriptions :column="5" border v-if="order">
      <el-descriptions-item label="工单单号：">
        {{ order.BillNO }}
      </el-descriptions-item>
      <el-descriptions-item label="来源单别：">
        {{ order.lydb }}
      </el-descriptions-item>
      <el-descriptions-item label="来源单号：">
        {{ order.FromNO }}
      </el-descriptions-item>
      <el-descriptions-item label="预开工日：">
        {{ order.EstTakeMatDate }}
      </el-descriptions-item>
      <el-descriptions-item label="预完工日：">
        {{ order.EstWareInDate }}
      </el-descriptions-item>
      <el-descriptions-item label="产品编号：">
        {{ order.ProdID }}
      </el-descriptions-item>
      <el-descriptions-item label="产品名称：">
        {{ order.ProdName }}
      </el-descriptions-item>
      <el-descriptions-item label="规格型号：">
        {{ order.ProdSize }}
      </el-descriptions-item>

      <el-descriptions-item label="工单数量：">
        {{ order.Quantity }}
      </el-descriptions-item>
      <el-descriptions-item label="生产车间：">
        {{ order.LineName }}
      </el-descriptions-item>
      <el-descriptions-item label="单位：">
        {{ order.Unit }}
      </el-descriptions-item>
    </el-descriptions>

    <div style="margin: 3px 0; display: flex; justify-content: end">
      <el-button
        :type="activeRoute === '' ? 'primary' : 'default'"
        @click="changeRoute('')"
        >全部</el-button
      >
      <el-button
        v-for="(item, index) in routeList"
        :key="index"
        :type="activeRoute === item.value ? 'primary' : 'default'"
        @click="changeRoute(item.value)"
        >{{ item.label }}</el-button
      >
    </div>

    <el-table border :data="tableData" class="ps_table_header">
      <el-table-column
        prop="BillDate"
        align="center"
        label="报工日期"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="BillNo"
        align="center"
        label="报工单号"
        min-width="110"
        show-overflow-tooltip
      />
      <el-table-column
        prop="OrderName"
        align="center"
        label="工序名称"
        width="110"
        show-overflow-tooltip
      >
        <template #default="scope">
          <text>{{ scope.row.OrderID }}</text>&nbsp;
          <text>{{ scope.row.OrderName }}</text>
        </template>
      </el-table-column>
      <el-table-column
        prop="scdw"
        align="center"
        label="单位类别"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="LineName"
        align="center"
        label="生产单位"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sbmc"
        align="center"
        label="设备名称"
        min-width="120"
        show-overflow-tooltip
      >
        <template #default="scope">
          <text>{{ scope.row.Udef20 }}</text>&nbsp;
          <text>{{ scope.row.sbmc }}</text>
        </template>
      </el-table-column>
      <el-table-column
        prop="PersonName"
        align="center"
        label="报工人员"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="GoodQty"
        align="center"
        label="良品数量"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="BadQty"
        align="center"
        label="不良品数量"
        width="90"
        show-overflow-tooltip
      />
      <el-table-column
        prop="dzgs"
        align="center"
        label="单支工时"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="RealTime"
        align="center"
        label="实际工时"
        width="100"
        show-overflow-tooltip
      />
      <el-table-column
        prop="StdTime"
        align="center"
        label="标准工时"
        width="100"
        show-overflow-tooltip
      />
    </el-table>

    <div class="ps_pagination">
      <el-pagination
        background
        v-model:current-page="page.pageCurrent"
        v-model:page-size="page.pageSize"
        layout="prev,pager,next,total"
        :total="page.total"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, watchEffect } from 'vue'
import { order_technology } from '@/api/production'

import { ScheduleOfWorkReports } from '@/api/pannel/production_pannel.js'

const tableData = ref([])
const allData = ref([])
const routeList = ref([])
const activeRoute = ref('')
const order = ref({})

const prop = defineProps({
  BillNO: String,
  route: Object,
  orderID: String
})

const page = ref({
  pageSize: 10,
  pageCurrent: 1,
  total: 0
})

const updataTableData = () => {
  tableData.value = allData.value.slice(
    (page.value.pageCurrent - 1) * page.value.pageSize,
    page.value.pageSize * page.value.pageCurrent
  )
}

const orderInfo = BillNO => {
  order_technology({ BillNO }).then(({ data }) => {
    routeList.value = data.map(item => {
      return { label: item.OrderName, value: item.OrderID }
    })
    if (!prop.orderID) {
      changeRoute('')
    }
  })
}

const changeRoute = route => {
  activeRoute.value = route
  ScheduleOfWorkReports({
    code: prop.BillNO,
    orderId: route
  }).then(({ data, total }) => {
    allData.value = data
    page.value.total = total
    updataTableData()
  })
}

watch(
  () => page.value.pageCurrent,
  () => {
    updataTableData()
  }
)

watchEffect(() => {
  order.value = prop.route
  if (prop.orderID) {
    changeRoute(prop.orderID)
  }
  orderInfo(prop.BillNO)
})
</script>

<style scoped lang="scss"></style>
